<template>
    <div>
        <el-row style="margin-left: 20px;">
            <el-col :span="8">
                <el-card class="box-card" style="width: 400px;">
                    <div v-for="(o, index) in RoletableData" :key="index" class="text item">
                        <el-button @click="roleSelectId(o.Id)"
                            style="width: 350px;text-align: left;border: 0px;font-size: 30px;">
                            {{ o.Name }}
                        </el-button>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16" style="margin-left: -20px;">
                <el-card>
                    <div style="margin-bottom: 10px;border-bottom: 3px solid;padding-bottom: 20px;">
                        <el-col :span="22">
                            <span style="line-height: 35px;">权限列表</span>
                        </el-col>
                        <el-col :span="2">
                            <el-button @click="savePermission" type="text" style="font-size: 20px;">保存</el-button>
                        </el-col>
                        <div style="clear: both;"></div>
                    </div>



                    <el-tree style="margin-top: 20px;" 
                    :data="treeData" ref="tree"
                    show-checkbox node-key="Id" default-expand-all
                        :default-checked-keys="checkedArray" :props="{ label: 'Name', children: 'children' }">
                    </el-tree>

                    
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>
<script>
import { RolesShow, RoleSelectId,AllotPermission } from '@/api/Roles.js';
import { PermissionsAll } from '@/api/Permissions.js';
export default {
    data() {
        return {
            RoletableData: [],
            treeData: [],
            checkedArray: [],//选中的结点ID值
            checkedRoleId:undefined,//被点击的角色的ID
        };
    },
    created() {
        this.roleshow();
        this.permissionTree();
    },
    methods: {
        //角色显示
        roleshow() {
            RolesShow().then((res) => {
                this.RoletableData = res;
            });
        },
        //权限显示
        permissionTree() {
            PermissionsAll().then(res => {
                this.treeData = res.Data
            })
        },
        //查询角色的权限
        roleSelectId(id) {
            this.checkedRoleId=id;
            console.log(this.checkedRoleId)
            RoleSelectId({ id: this.checkedRoleId }).then(res => {
                this.checkedArray = res.Data.PermissionList;
                //console.log(this.checkedArray);
                this.$refs.tree.setCheckedKeys(this.checkedArray);
            })
        },
        //保存分配的权限
        savePermission() {
            if(this.checkedRoleId==undefined){
                this.$message.warning('请选择角色');
                return;
            }
            //获取选中的叶子结点
            this.checkedArray = this.$refs.tree.getCheckedKeys(true);
            let data={
                id:this.checkedRoleId,
                permissionId:this.checkedArray
            }
            console.log(data);
            //调用后台接口
            AllotPermission(data).then(res=>{
                if(res.Code==200){
                    this.$message.success(res.Message)
                }else{
                    this.$message.error(res.Message)
                }
            })
        },
    }
};
</script>